<template>
    <p style="line-height: 3.125rem; font-size: 1rem; font-weight: bold" class="main_text">系统功能设置</p>
    <div class="main p20">
        <div class="mb20">
            <el-button type="primary" @click="centerDialogVisible = true">新增功能</el-button>
        </div>
        <!-- 全部展开---default-expand-all -->
        <el-table :data="tableData" style="width: 100%; margin-bottom: 1.25rem" height="600" row-key="id"
            :expand-row-keys="[]">
            <el-table-column prop="name" label="功能名称" />
            <el-table-column prop="code" label="操作代码" />
            <el-table-column prop="state" label="状态" width="80">
                <template #default="scope">
                    <!-- N 表示启用    D 表示禁用 -->
                    <el-text size="small" type="success" v-if="scope.row.state == 'N'">启用</el-text>
                    <el-text size="small" type="success" v-else>禁用</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="uri" label="路由地址" />
            <el-table-column prop="menuIndex" label="菜单排序" />
            <el-table-column prop="menuIndex" label="客户端" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" link @click="handleEdit(scope.row.id)">修改</el-button>
                    <el-popconfirm title="你确定要删除吗？" @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button link type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 蒙层------新增功能 -->
        <el-dialog v-model="centerDialogVisible" title="新增功能" align-center width="40%">
            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">新增功能</p>
                </div>
            </template>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="7.5rem" label-position="left"
                class="df fdc aic" status-icon>
                <el-form-item label="名称：" prop="name" style="width: 60%">
                    <el-input v-model="ruleForm.name" placeholder="输入名称" />
                </el-form-item>
                <el-form-item label="英文简称：" prop="code" style="width: 60%">
                    <el-input v-model="ruleForm.code" placeholder="输入英文简称" />
                </el-form-item>
                <!-- client_type:【 W：PC-web端，M：移动端】 -->
                <el-form-item label="展示地点：" prop="code" style="width: 60%">
                    <el-select v-model="ruleForm.client_type" placeholder="W：PC-web端，M：移动端">
                        <el-option label="PC-Web端" value="W" />
                        <el-option label="移动端" value="M" />
                    </el-select>
                </el-form-item>
                <el-form-item label="URL：" prop="uri" style="width: 60%">
                    <el-input v-model="ruleForm.uri" placeholder="输入url" />
                </el-form-item>
                <el-form-item label="fileUrl：" prop="fileUrl" style="width: 60%">
                    <el-input v-model="ruleForm.fileUrl" placeholder="输入完整url" />
                </el-form-item>
                <el-form-item label="图标地址：" prop="iconUrl" style="width: 60%">
                    <el-input v-model="ruleForm.iconUrl" placeholder="图标地址" />
                </el-form-item>
                <el-form-item label="重定向：" prop="redirect" style="width: 60%">
                    <el-input v-model="ruleForm.redirect" placeholder="vue路由重定向" />
                </el-form-item>
                <!-- ################################################################ 上级功能： ################################################################-->
                <el-form-item label="上级功能：" prop="parentId" style="width: 60%">
                    <!-- <el-select v-model="ruleForm.parentId" placeholder="选择上级" style="width: 60%;">
                                <el-option v-for="item in parentArr" :key="item.id" :label="item.name" :value="item.id" />
                            </el-select> -->
                    <el-tree-select v-model="ruleForm.parentId" :data="ParentList" check-strictly
                        :render-after-expand="false" />
                </el-form-item>
                <el-form-item label="状态：" prop="state" style="width: 60%">
                    <el-select v-model="ruleForm.state" placeholder="N-启用，D-禁用">
                        <!-- N 表示启用    D 表示禁用 -->
                        <el-option label="启用" value="N" />
                        <el-option label="禁用" value="D" />
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单排序：" prop="menuIndex" style="width: 60%">
                    <el-input v-model="ruleForm.menuIndex" placeholder="输入rul" />
                </el-form-item>
                <!-- <el-form-item label="打开方式：" prop="openMode">
                            <el-select v-model="ruleForm.openMode" placeholder="选择打开方式" style="width: 60%;">
                                <el-option label="N" value="N" />
                                <el-option label="D" value="D" />
                            </el-select>
                        </el-form-item> -->
                <el-form-item label="备注" prop="remarks" style="width: 60%">
                    <el-input v-model="ruleForm.remarks" type="textarea" placeholder="备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 蒙层------修改单个菜单 -->
        <el-dialog v-model="ModifyDialogVisible" title="修改菜单" align-center width="40%">
            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">修改菜单</p>
                </div>
            </template>
            <el-form :model="editData" label-width="7.5rem" class="df fdc aic" label-position="left" status-icon>
                <el-form-item label="名称：" prop="name" style="width: 60%">
                    <el-input v-model="editData.name" placeholder="输入名称" />
                </el-form-item>
                <el-form-item label="英文简称：" prop="code" style="width: 60%">
                    <el-input v-model="editData.code" placeholder="输入英文简称" />
                </el-form-item>
                <!-- client_type:【 W：PC-web端，M：移动端】 -->
                <el-form-item label="展示地点：" prop="code" style="width: 60%">
                    <el-select v-model="editData.client_type" placeholder="W：PC-web端，M：移动端">
                        <el-option label="PC-Web端" value="W" />
                        <el-option label="移动端" value="M" />
                    </el-select>
                </el-form-item>
                <el-form-item label="地址：" prop="uri" style="width: 60%">
                    <el-input v-model="editData.uri" placeholder="输入url" />
                </el-form-item>
                <el-form-item label="fileUrl：" prop="fileUrl" style="width: 60%">
                    <el-input v-model="editData.fileUrl" placeholder="输入完整url" />
                </el-form-item>
                <el-form-item label="图标地址：" prop="iconUrl" style="width: 60%">
                    <el-input v-model="editData.iconUrl" placeholder="图标地址" />
                </el-form-item>
                <el-form-item label="重定向：" prop="redirect" style="width: 60%">
                    <el-input v-model="editData.redirect" placeholder="vue路由重定向" />
                </el-form-item>
                <el-form-item label="上级功能：" prop="parentId" style="width: 60%">
                    <!-- <el-select v-model="editData.parentId" placeholder="选择上级" style="width: 60%;">
                        <el-option v-for="item in parentArr" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select> -->
                    <el-tree-select v-model="editData.parentId" :data="ParentList" check-strictly
                        :render-after-expand="false" />
                </el-form-item>
                <el-form-item label="状态：" prop="state" style="width: 60%">
                    <el-select v-model="editData.state" placeholder="N-启用，D-禁用">
                        <!-- N 表示启用    D 表示禁用 -->
                        <el-option label="启用" value="N" />
                        <el-option label="禁用" value="D" />
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单排序：" prop="menuIndex" style="width: 60%">
                    <el-input v-model="editData.menuIndex" placeholder="输入rul" />
                </el-form-item>
                <!-- <el-form-item label="打开方式：" prop="openMode">
                    <el-select v-model="editData.openMode" placeholder="选择打开方式" style="width: 60%;">
                        <el-option label="N" value="N" />
                        <el-option label="D" value="D" />
                    </el-select>
                </el-form-item> -->
                <el-form-item label="备注：" prop="remarks" style="width: 60%">
                    <el-input v-model="editData.remarks" type="textarea" placeholder="备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    <el-button type="primary" @click="saveBtn">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { Edit } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
    RequestSysFunctionSave,
    RequestSysFunctionDel,
    RequestSysFunctionUpdate,
    RequestSysFunctionDelHq,
    RequestSysFunctionGettree,
    RequestSysFunctionGetAllFunctionTree
} from '../../../api/path/index.js'
const tableData = ref<any>([])
const ParentList = ref<any>()
/* 获取所有菜单列表 */
const getData = async () => {
    let res = await RequestSysFunctionGetAllFunctionTree()
    tableData.value = res.resultObj
    // tableData.value = JSON.parse(JSON.stringify(res.resultObj).replace(/{ title: '/g, '').replace(/' }/g, ''))   //菜单
    ParentList.value = JSON.parse(
        JSON.stringify(tableData.value).replace(/id/g, 'value').replace(/name/g, 'label')
    )
    // RequestSysFunctionGettree().then((res: any) => {
    //     console.log(res);
    // })
}
getData()

/* 删除单个菜单 */
const handleDelete = async (row: any) => {
    let res = await RequestSysFunctionDel(row.id)
    // console.log(res);
    getData()
}

const centerDialogVisible = ref<any>(false)

/* 表单验证 */
const ruleFormRef = ref<any>()
const ruleForm = ref<any>({
    id: '',
    name: '',
    code: '',
    uri: '',
    fileUrl: '',
    parentId: '',
    iconUrl: '',
    state: '',
    // openMode: '',
    redirect: '',
    menuIndex: '',
    remarks: '',
    client_type: '',
})

/* 修改 */
const editData = ref<any>({})
const ModifyDialogVisible = ref<any>(false)
const handleEdit = (id: any) => {
    ModifyDialogVisible.value = true
    // console.log(row);
    RequestSysFunctionDelHq(id).then((res: any) => {
        // console.log("ididididididididid", res.resultObj);
        editData.value = res.resultObj
    })
}
/* 修改完后保存 */
const saveBtn = () => {
    RequestSysFunctionUpdate({
        id: editData.value.id,
        name: editData.value.name,
        code: editData.value.code,
        state: editData.value.state,
        uri: editData.value.uri,
        fileUrl: editData.value.fileUrl,
        parentId: editData.value.parentId,
        iconUrl: editData.value.iconUrl,
        // openMode: editData.value.openMode,
        redirect: editData.value.redirect,
        menuIndex: editData.value.menuIndex,
        remarks: editData.value.remarks,
        clientType: editData.value.client_type,
    }).then((res: any) => {
        ElMessage.success(res.msg)
        ModifyDialogVisible.value = false
        // getData()
    })
}

/* 表单校验 */
const rules = ref<any>({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        // { min: 3, max: 5, message: '请确保名称在3到5位', trigger: 'blur' },
    ],
    code: [
        { required: true, message: '请输入操作代码', trigger: 'blur' },
        // { min: 3, max: 5, message: '请输入3到5位', trigger: 'blur' },
    ],
    url: [
        { required: true, message: '请输入url地址', trigger: 'blur' },
        // { min: 3, max: 5, message: '请输入正确的url', trigger: 'blur' },
    ],
    parentId: [
        {
            required: true,
            message: '请选择上级',
            trigger: 'change',
        },
    ],
    state: [
        {
            required: true,
            message: '请选择状态',
            trigger: 'change',
        },
    ],
})

/* 添加 */
const submitForm = async (formEl: any | undefined) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            /* 菜单列表请求接口 */
            RequestSysFunctionSave({
                id: ruleForm.value.id,
                name: ruleForm.value.name,
                code: ruleForm.value.code,
                state: ruleForm.value.state,
                uri: ruleForm.value.uri,
                fileUrl: ruleForm.value.fileUrl,
                parentId: ruleForm.value.parentId,
                iconUrl: ruleForm.value.iconUrl,
                // openMode: ruleForm.value.openMode,
                redirect: ruleForm.value.redirect,
                menuIndex: ruleForm.value.menuIndex,
                remarks: ruleForm.value.remarks,
                clientType: ruleForm.value.client_type,
            }).then((res: any) => {
                console.log(res)
                ElMessage.success(res.msg)
                ruleForm.value = ''
                centerDialogVisible.value = false
                getData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: any | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped lang="scss">
.main {
    width: 100%;
    background-color: #fff;
}


/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;

        .el-icon svg {
            color: #fff;
        }
    }

    .el-dialog__title {
        color: #fff;
    }


}

::v-deep .el-select {
    width: 100% !important;
}
</style>
